<template>
  <div>
    <el-dialog
      title="回滚"
      :visible.sync="rollbackYamlInfoDialog"
      width="50%"
      append-to-body
    >
      <!--        :before-close="handleClose(done)"-->
      <el-form
        :model="rollbackModelInfo"
        :rules="rules"
        ref="rollbackRuleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div style="display: flex; justify-content: center">
          <el-form-item label="服务名称">
            <el-input
              v-model="rollbackModelInfo.name"
              disabled
              style="width: 300px"
            ></el-input>
          </el-form-item>
        </div>
        <div style="display: flex; justify-content: center">
          <el-form-item label="目标版本" prop="version">
            <el-select
              v-model="rollbackModelInfo.version"
              placeholder="请选择目标版本"
              style="width: 300px"
              @change="selectRollbackVersion"
            >
              <el-option
                v-for="item in versionList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item>
          <div
            style="height: 35vh; overflow-y: scroll"
            v-show="yamlValue !== ''"
          >
            <codemirror v-model="yamlValue" :options="cmOptions"/>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="float: right">
            <el-button
              type="primary"
              @click="submitRollback"
              class="el-button-primary-style"
            >
              回滚
            </el-button>
            <el-button
              type="primary"
              class="el-button-primary-style"
              @click="closeRollbackDialog"
            >
              取消
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {codemirror} from "vue-codemirror";
  import "codemirror/lib/codemirror.css";
  import "codemirror/mode/yaml/yaml.js";

  export default {
    name: "RollbackYamlCloudInfo",
    components: {
      codemirror,
    },
    props: ["selectYamlId", "selectYamlName"],
    data() {
      return {
        rollbackYamlInfoDialog: false,
        rollbackModelInfo: {
          id: "",
          name: "",
          version: "",
        },
        rules: {
          version: [
            {required: true, message: "请选择活动区域", trigger: "change"},
          ],
        },
        versionList: [],
        cmOptions: {
          mode: "yaml", // 使用YAML模式
          theme: "default", // 使用默认主题
          lineNumbers: true, // 显示行号
          line: true, // 显示行高亮
          styleActiveLine: true, // 高亮当前行
          matchBrackets: true, // 括号匹配高亮
          autoCloseBrackets: true, // 自动闭合括号
          gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"], // 显示行号和折叠标记
          foldGutter: true, // 启用折叠功能
        },
        yamlValue: "",
        cloudNativeInfo: {
          id: "",
          yamlDeployName: "",
          yamlDeployType: "",
          yamlName: "",
          yamlVersion: "",
          yamlDescription: "",
          yamlImages: "",
          yamlContent: "",
        },
        tmpCloudNativeInfo: {},
      };
    },
    methods: {
      selectRollbackVersion() {
        this.yamlValue = "";
        this.$appManageApi.rollbackCloudYamlDetail(this.rollbackModelInfo).then((res) => {
          if (res && res.code === 200) {
            this.yamlValue = res.data;
          }
        });
      },
      submitRollback() {
        this.$refs.rollbackRuleForm.validate(async (valid) => {
          if (valid) {
            const loading = this.$loading({
              lock: true,
              text: "Loading",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
            });
            await this.$appManageApi
              .rollbackCloudYaml(this.rollbackModelInfo)
              .then((res) => {
                if (res && res.code === 200) {
                  this.$message.success(res.data);
                  this.closeRollbackDialog();
                  loading.close();
                }
              });
            loading.close();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      closeRollbackDialog() {
        this.$emit("closeRollbackYamlCloudInfoRef");
        this.rollbackYamlInfoDialog = false;
        this.rollbackModelInfo = {
          id: "",
          name: "",
          version: "",
        };
        this.versionList = [];
      },
      rollbackCloudNative() {
        this.rollbackModelInfo.id = this.selectYamlId;
        this.rollbackModelInfo.name = this.selectYamlName;
        this.$appManageApi.versionCloudYamlInstance(this.selectYamlId).then((res) => {
          if (res && res.code === 200) {
            this.versionList = res.data;
          }
        });
      },
    },
    beforeMount() {
      this.rollbackCloudNative();
    },
  };
</script>

<style scoped>
</style>
